<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Petite-Vue Directives</title>
  <style>html,body{height:100%;margin:0;}</style>
  <script src="./tailwindcss-jit-cdn-ex.min.js"></script>
</head>

<body class="flex p-8">
  <div id="app" @vue:mounted="mounted">
    <h1 class="font-bold text-3xl mb-4 text-green-500">Petite-Vue Directives Demo</h1>
    <ul v-ref="demo-list" class="font-mono list-disc pl-4">
      <template v-for="item in demos">
        <li class="py-1">
          <a :href="item.url" class="hover:underline">{{ item.name }}</a>
        </li>
      </template>
      <li class="py-1">
        <a href="./test/index.html" class="hover:underline text-green-500">test only</a>
      </li>
    </ul>
  </div>

  <script type="module">
    import { createApp } from './petite-vue.es.js'
    import * as directives from './dist/petite-vue-directives.es.js'
    const { vRef } = directives

    createApp({
      demos: [],
      async mounted() {
        const ul = this.$refs['demo-list']
        const demos = import.meta.glob('./directives/**/demo.html', { as: 'url' })
        for (const path in demos) {
          const url = await demos[path]()
          const name = path.match(/directives\/(.*?)\//)?.[1] || path
          if (name === 'template') continue
          this.demos.push({ name, url })
        }
      }
    })
    .directive('ref', vRef)
    .mount('#app')
  </script>
</body>
</html>